<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="alternate icon" type="image/png" href="i/favicon1.png">
<link rel="stylesheet" href="css/amazeui.min.css" />

<style>
.get {
	background: #1E5B94;
	color: #fff;
	text-align: center;
	padding: 100px 0;
}

.get-title {
	font-size: 200%;
	border: 2px solid #fff;
	padding: 20px;
	display: inline-block;
}

.get-btn {
	background: #fff;
}

.detail {
	background: #fff;
}

.detail-h2 {
	text-align: center;
	font-size: 150%;
	margin: 40px 0;
}

.detail-h3 {
	color: #1f8dd6;
}

.detail-p {
	color: #7f8c8d;
}

.detail-mb {
	margin-bottom: 30px;
}

.hope {
	background: #0bb59b;
	padding: 50px 0;
}

.hope-img {
	text-align: center;
}

.hope-hr {
	border-color: #149C88;
}

.hope-title {
	font-size: 140%;
}

.about {
	background: #fff;
	padding: 40px 0;
	color: #7f8c8d;
}

.about-color {
	color: #34495e;
}

.about-title {
	font-size: 180%;
	padding: 30px 0 50px 0;
	text-align: center;
}

.footer p {
	color: #7f8c8d;
	margin: 0;
	padding: 15px 0;
	text-align: center;
	background: #2d3e50;
}
</style>
</head>
<body>
<s:set name="username" value="#session['username']" />
	<header class="am-topbar">
	<h1 class="am-topbar-brand">
		<i class="am-icon-modx am-icon-sm"></i>
		<s:a href="index">Wonderful Song</s:a>
	</h1>

	<button
		class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only"
		data-am-collapse="{target: '#collapse-head'}">
		<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
	</button>



	<div class="am-collapse am-topbar-collapse" id="collapse-head">
		<ul class="am-nav am-nav-pills am-topbar-nav">
			<li class="am-active"><s:a href="index"><span class="am-icon-home"></span>  首页</s:a></li>
			<li><s:if test="#username != null">
					<s:a
						href="masonry?username=%{#username.username}&
image=%{#username.image}"><span class="am-icon-music"></span>  瀑布流</s:a>
				</s:if> <s:else>
					<s:a href="masonrynologin"><span class="am-icon-music"></span>  瀑布流</s:a>
				</s:else></li>

			<s:if test="#username != null">
				<li class="am-dropdown" data-am-dropdown>
				<a class="am-dropdown-toggle" data-am-dropdown-toggle	href="javascript:;"> 
				<span class="am-icon-user"></span> 个人中心 
				<span class="am-icon-caret-down"></span>
				</a>
				
					<ul class="am-dropdown-content">
						<li><s:a href="admin_user?username=%{#username.username}">个人信息</s:a></li>
						<li><s:a
								href="my_order?username=%{#username.username}&image=%{#username.image}">个人歌单</s:a>
						</li>
					</ul>
					
					</li>
					</s:if>
			

		</ul>


		
			<div class="am-topbar-right">
			<s:if test="#username == null">
				<button onclick="window.location='regist.jsp'"
					class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">
					<span class="am-icon-pencil"></span> 注册
				</button>
				</s:if>
			</div>

			<div class="am-topbar-right">
			<s:if test="#username == null">
				<button onclick="window.location='login.jsp'"
					class="am-btn am-btn-primary am-topbar-btn am-btn-sm">
					<span class="am-icon-user"></span> 登录
				</button>
				</s:if>
			</div>
		
		
		
			<div class="am-topbar-right">
			<s:if test="#username != null">
				<button onclick="window.location='regist.jsp'"
					class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">
					<span class="am-icon-pencil"></span> 注册
				</button>
				</s:if>
			</div>

			<div class="am-topbar-right">
			<s:if test="#username != null">
				<button onclick="window.location='logout.action'"
					class="am-btn am-btn-primary am-topbar-btn am-btn-sm">
					<span class="am-icon-sign-out"></span> 注销
				</button>
				</s:if>
			</div>





		<s:if test="#username != null">
			<div class="am-topbar-right">
				<ul class="am-nav am-nav-pills am-topbar-nav">
					<li><s:a href="#"><img class="am-circle"
							src="${pageContext.servletContext.contextPath}/img/${username.image}"
							width="40" height="40" /> </s:a></li>
					<li><s:a href="admin_user?username=%{#username.username}">${username.username}</s:a>
					</li>
				</ul>
			</div>
		</s:if>

		<s:form action="search?username=%{#username.username}&image=%{#username.image}" method="post" theme="simple"
			class="am-topbar-form am-topbar-left am-form-inline am-topbar-right"
			role="search">
			<div class="am-form-group">

				<s:textfield type="text" class="am-form-field am-input-sm" name="s"
					placeholder="请输入歌曲名称" />
					<%-- <s:hidden name="key" value="579621905"></s:hidden>
					<s:hidden name="limit" value="1"></s:hidden>
					<s:hidden name="offset" value="0"></s:hidden>
					<s:hidden name="type" value="song"></s:hidden> --%>
			</div>
			<s:submit value="搜索" type="submit"
				class="am-btn am-btn-default am-btn-sm" />
		</s:form>

	</div>
	</div>
	</header>
	<!--  导航栏部分结束-->

	<!--轮播图部分-->

	<div class="am-slider am-slider-default" data-am-flexslider
		id="demo-slider-0">
		<ul class="am-slides">
			<li><img src="img/36.jpg" /></li>
			<li><img src="img/33.jpg" /></li>
			<li><img src="img/34.jpg" /></li>
			<li><img src="img/35.jpg" /></li>
			<li><img src="img/41.jpg" /></li>
			<li><img src="img/42.jpg" /></li>
		</ul>
	</div>

	<script>
		$(function() {
			var $slider = $('#demo-slider-0');
			var counter = 0;
			var getSlide = function() {
				counter++;
				return '<li><img src="http://s.amazeui.org/media/i/demos/bing-'
						+ (Math.floor(Math.random() * 4) + 1) + '.jpg" />'
						+ '<div class="am-slider-desc">动态插入的 slide ' + counter
						+ '</div></li>';
			};

			$('.js-demo-slider-btn').on(
					'click',
					function() {
						var action = this.getAttribute('data-action');
						if (action === 'add') {
							$slider.flexslider('addSlide', getSlide());
						} else {
							var count = $slider.flexslider('count');
							count > 1
									&& $slider.flexslider('removeSlide',
											$slider.flexslider('count') - 1);
						}
					});

		});
	</script>
	<!--  轮播图部分结束-->
	<div class="detail">
		<div class="am-g am-container">
			<div class="am-u-lg-12">
				<h2 class="detail-h2">心情不同，内心的背景音乐也不同，打造属于你的歌单</h2>

				<div class="am-g">
					<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">

						<h3 class="detail-h3">
							<i class="am-icon-headphones am-icon-sm"></i> 丰富的乐库
						</h3>

						<p class="detail-p">
							整合了qq音乐、网易云音乐、酷狗音乐的音乐接口，海量音乐任你搜。还可以将喜欢的音乐添加至自建的歌单，打造属于自己的心情日记。</p>
					</div>
					<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
						<h3 class="detail-h3">
							<i class="am-icon-star am-icon-sm"></i> 一键收藏他/她的歌单
						</h3>

						<p class="detail-p">
							主页会显示收藏量最大的几名音乐达人的歌单，让优秀的歌单不被埋没，动人的音乐广泛流传。还可以撰写自己对歌曲的感想，你的知己们都可以看到哦。
						</p>
					</div>
					<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
						<h3 class="detail-h3">
							<i class="am-icon-heart am-icon-sm"></i> 安全交友
						</h3>

						<p class="detail-p">
							志趣相投，想认识他/她？那就给他/她发一封邮件吧！真正的交流需要距离成本，一封远道而来的邮件，诉说的是你的心声！</p>
					</div>
					<div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
						<h3 class="detail-h3">
							<i class="am-icon-bars am-icon-sm"></i> 便捷管理
						</h3>

						<p class="detail-p">
							可以方便地管理自己的歌单。不想让别人看到？那就把它设为私密吧。不愿意你的歌单被别人收藏？歌单的权限也可以设置哦！</p>
					</div>
				</div>
			</div>
		</div>
	</div>


	<div class="hope">
		<div class="am-g am-container">
			<div class="am-u-lg-4 am-u-md-6 am-u-sm-12 hope-img">
				<img src="i/examples/hope.png" alt=""
					data-am-scrollspy="{animation:'slide-left', repeat: false}">
				<hr class="am-article-divider am-show-sm-only hope-hr">
			</div>
			<div class="am-u-lg-8 am-u-md-6 am-u-sm-12">
				<h2 class="hope-title">最受欢迎歌单TOP10</h2>

				<p>
					你可以点击查看详细来查看歌单之内的歌曲，主人自己上传的歌曲可以在线试听或下载，第三方音乐将跳转到原网页播放，但你仍然可以收藏。</p>
			</div>
		</div>
	</div>

	<div class="about">
		<div class="am-g am-container">
			<div class="am-u-lg-12">
				<ul data-am-widget="gallery"
					class="am-gallery am-avg-sm-2 am-gallery-imgbordered">
					<s:iterator value="ordercreatelist" var="ordercreate">
						<li>
							<div class="am-gallery-item">
								<!-- <s:a href="#" class=""> -->
								<s:if test="#username == null">
									<s:a
										href="querymasonryordernologin?
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:if>
								<s:else>
									<s:a
										href="querymasonryorder?
			username=%{#username.username}&
			image=%{#username.image}&
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:else>
								<!-- </s:a> -->
								<h3 class="am-gallery-title">
									<s:property value="#ordercreate.order_info" />
								</h3>
								<div class="am-gallery-desc">
									<s:property value="#ordercreate.order_date" />
								</div>
							</div>
						</li>
					</s:iterator>



				</ul>
				<ul data-am-widget="gallery"
					class="am-gallery am-avg-sm-2
am-avg-md-3 am-avg-lg-4 am-gallery-imgbordered"
					data-am-gallery="{  }">
					<s:iterator value="ordercreatelist2" var="ordercreate">
						<li>
							<div class="am-gallery-item">
								<s:if test="#username == null">
									<s:a
										href="querymasonryordernologin?
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:if>
								<s:else>
									<s:a
										href="querymasonryorder?
			username=%{#username.username}&
			image=%{#username.image}&
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:else>
									<h3 class="am-gallery-title">
										<s:property value="#ordercreate.order_info" />
									</h3>
									<div class="am-gallery-desc">
										<s:property value="#ordercreate.order_date" />
									</div>
							</div>
						</li>
					</s:iterator>


				</ul>

				<ul data-am-widget="gallery"
					class="am-gallery am-avg-sm-2
am-avg-md-3 am-avg-lg-4 am-gallery-imgbordered"
					data-am-gallery="{  }">
					<s:iterator value="ordercreatelist3" var="ordercreate">
						<li>
							<div class="am-gallery-item">
								<s:if test="#username == null">
									<s:a
										href="querymasonryordernologin?
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:if>
								<s:else>
									<s:a
										href="querymasonryorder?
			username=%{#username.username}&
			image=%{#username.image}&
			orderId=%{#ordercreate.id}&
			ordertitle=%{#ordercreate.order_title}
			">
										<img class="am-img-thumbnail am-img-bdrs" width="183px"
											height="118px"
											src="${pageContext.servletContext.contextPath}/img/${order_img}">
									</s:a>
								</s:else>
									<h3 class="am-gallery-title">
										<s:property value="#ordercreate.order_info" />
									</h3>
									<div class="am-gallery-desc">
										<s:property value="#ordercreate.order_date" />
									</div>
							</div>
						</li>
					</s:iterator>


				</ul>
			</div>
		</div>
	</div>



	<footer data-am-widget="footer" class="am-footer am-footer-default"
		data-am-footer="{  }">
	<div class="am-footer-switch">
		<span class="am-footer-ysp" data-rel="mobile"
			data-am-modal="{target: '#am-switch-mode'}"> Wonderful Song </span> <span
			class="am-footer-divider"> | </span> <span class="am-footer-ysp"
			data-rel="mobile" data-am-modal="{target: '#am-switch-mode'}">
			打造你的个性歌单 </span>

	</div>
	<div class="am-footer-miscs ">

		<p>王骏&nbsp;&nbsp;毕业设计作品</p>
		<p>CopyRight©2019 15软件G1班</p>
		<p>2015330117</p>
	</div>
	</footer>




	<script src="js/jquery.min.js"></script>
	<script src="js/amazeui.min.js"></script>
	<script src="js/masonry.pkgd.js"></script>
	<script src="js/masonry.pkgd.min.js"></script>
</body>
</html>